<template>
  <div class="printData-container app-container">
    
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="生产区域" name="offer">
        <offer ref="offer" v-if="isChildUpdate1"></offer>
      </el-tab-pane>
      <el-tab-pane label="储罐区" name="bill">
        <bill ref="bill" v-if="isChildUpdate2"></bill>
      </el-tab-pane>
      <el-tab-pane label="仓库区" name="record">
        <record ref="record" v-if="isChildUpdate3"></record>
      </el-tab-pane>
     
    </el-tabs>
  </div>
</template>
<script>
import offer from "./scqqxx/index";
import bill from "./cgq/index";
import record from "./ckq/index";
import printStyle from './printStyle'
export default {
  name: "extend-printData",
  data() {
    return {
      activeName: "offer",
      isChildUpdate1:true,
      isChildUpdate2:false,
      isChildUpdate3:false
    };
  },
  components: {
    offer,
    bill,
    record,
  },
  methods: {
    print() {
      let print = this.$refs[this.activeName].$refs.print.innerHTML
      let printPart = print + printStyle;
      let newTab = window.open('_blank');
      newTab.document.body.innerHTML = printPart;
      newTab.print();
      newTab.close();
    },
    handleClick(tab) {
        if(tab.name == "offer") {
            this.isChildUpdate1 = true;
            this.isChildUpdate2 = false;
            this.isChildUpdate3 = false;
        } else if(tab.name == "bill") {
            this.isChildUpdate1 = false;
            this.isChildUpdate2 = true;
            this.isChildUpdate3 = false;
        } else if(tab.name == "record") {
            this.isChildUpdate1 = false;
            this.isChildUpdate2 = false;
            this.isChildUpdate3 = true;
        }
    }
  }
};
</script>

<style lang="scss" scoped>
.printData-container {
  .el-tabs {
    width: 100%;
    height: 100%;
  }
  padding: 0;
  >>> .el-table thead.is-group th {
    background: #fff !important;
  }
  .prtBtn {
    position: absolute;
    right: 28px;
    top: 4px;
    z-index: 1;
  }
  >>> .el-tabs__content {
    height: calc(100% - 39px);
    .el-tab-pane {
      height: 100%;
    }
  }
  >>> .storage {
    width: 100%;
    margin: 0 auto;
    .el-table thead tr,
    .el-table thead tr th {
      color: #606266;
    }
  }
  >>> .el-table {
   width: 100%;
    margin: 0 auto;
    thead {
      color: #606266;
    }
  }
  >>> .bill {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .bill-title {
      color: #606266;
    }
  }
}
</style>